<template>
	<el-card>
		<div class="scheduleRecordDivClass">
			<el-form :inline="true" :model="state.queryForm" id="patient-form">
				<el-form-item>
					<el-input v-model="state.queryForm.empi" placeholder="请输入主索引号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="state.queryForm.pttNm" placeholder="请输入姓名/手机号"></el-input>
				</el-form-item>
				<el-form-item class="idCrdCode">
					<el-select v-model="idCrdCode" style="width: 130px">
						<el-option label="身份证" value="01">身份证</el-option>
					</el-select>
					<!-- <fast-select
						style="width: 100px"
						v-model="state.queryForm.idCrdNo"
						dict-type="mpi_id_crd_cgy_cd"
						placeholder="证件号"
						clearable
						filterable
					></fast-select> -->
				</el-form-item>
				<el-form-item>
					<el-input v-model="state.queryForm.idCrdNo" placeholder="请输入证件号"></el-input>
				</el-form-item>
				<el-form-item>
					<fast-select
						style="width: 130px"
						v-model="state.queryForm.sex"
						dict-type="mpi_gdr_cd"
						placeholder="请选择性别"
						clearable
						filterable
					></fast-select>
				</el-form-item>

				<el-form-item>
					<el-button :icon="Search" @click="searchBtn" type="primary">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :icon="Refresh" @click="resets">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button v-auth="'patient-primary:patient-mana:add'" :icon="Plus" type="primary" @click="addPatient()">新建</el-button>
				</el-form-item>
				<el-form-item>
					<el-button v-auth="'patient-primary:patient-mana:delete'" :icon="Delete" type="danger" @click="deletesHandle">批量删除</el-button>
				</el-form-item>
			</el-form>
			<el-table
				v-loading="state.dataListLoading"
				:data="state.dataList"
				border
				row-key="empi"
				max-height="calc(100vh - 325px )"
				style="width: 100%"
				@selection-change="selectionChangeHandle"
			>
				<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
				<el-table-column prop="empi" label="EMPI号" width="200" align="center">
					<template #default="scope">
						<span @click="seeOrUpdateHandle(scope.row.empi, 'see')" style="color: #5774f4; cursor: pointer">
							{{ scope.row.empi }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="pttNm" label="姓名" header-align="center" align="center"></el-table-column>
				<fast-table-column prop="gdrCd" label="性别" dict-type="mpi_gdr_cd" header-align="center" align="center"></fast-table-column>
				<el-table-column prop="bthDt" label="出生日期" header-align="center" align="center"></el-table-column>
				<el-table-column prop="slfTelNo" label="手机号" header-align="center" align="center"></el-table-column>
				<el-table-column prop="currAddrDscpt" label="现住址" header-align="center" align="center" width="200"></el-table-column>
				<el-table-column prop="idCrdNo" label="身份证号" header-align="center" align="center" width="170"></el-table-column>
				<!-- <el-table-column prop="socialSecurityNo" label="社保卡号" header-align="center" align="center"></el-table-column> -->

				<el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
				<!-- <el-table-column prop="associationRecord" label="关联记录" header-align="center" align="center"></el-table-column> -->
				<el-table-column label="操作" fixed="right" header-align="center" align="center" width="180">
					<template #default="scope">
						<el-button type="primary" link @click="seeOrUpdateHandle(scope.row.empi, 'see')">查看</el-button>
						<el-button type="primary" v-auth="'patient-primary:patient-mana:edit'" link @click="seeOrUpdateHandle(scope.row.empi, 'edit')">
							编辑
						</el-button>
						<el-button
							type="danger"
							v-auth="'patient-primary:patient-mana:delete'"
							link
							@click="deleteIdHandle(scope.row.empi, `确认删除主索引【${scope.row.empi}】`)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:current-page="state.page"
				:page-sizes="state.pageSizes"
				:page-size="state.limit"
				:total="state.total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
			>
			</el-pagination>

			<!-- 弹窗, 新增 -->
			<AddPatient ref="addPatientRef" @close="getDataList"></AddPatient>

			<!-- 查看 编辑 -->
			<div class="drawerClass" style="height: 100%">
				<see-or-update :adcd="provinceCode" ref="seeOrUpdateRef" @close="getDataList" @back="getPageDataList"></see-or-update>
			</div>
		</div>
	</el-card>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks/indexZSY.ts'
import { onMounted, reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'

import { ElMessage, ElMessageBox } from 'element-plus/es'
import { Delete, Edit, Search, Plus, CircleClose, Refresh } from '@element-plus/icons-vue'
import AddPatient from './addPatient.vue'
import SeeOrUpdate from './seeOrUpdate.vue'

import { deletePatient, deletePatientEs } from '@/api/patient-primary/patient-mana'
import { useDictProviceDetailApi } from '@/api/patient-primary/index'

const state: IHooksOptions = reactive({
	dataListUrl: '/empi/masterindex/page',
	queryForm: {
		empi: '',
		pttNm: '',
		idCrdNo: '',
		sex: ''
	},
	primaryKey: 'empi',
	dataListSelections: []
})
const idCrdCode = ref('01')

const seeOrUpdateRef = ref()

const provinceCode = ref([])

onMounted(() => {
	getAddressCode(0, false).then(res => {
		provinceCode.value = res
	})
})

const addPatientRef = ref()
const addPatient = () => {
	addPatientRef.value.init()
}

const searchBtn = () => {
	state.page = 1
	getDataList()
}

const seeOrUpdateHandle = (id, type) => {
	if (type == 'edit') {
		if (!id) {
			ElMessage.error('该数据没有EMPI号')
			return
		}
	}
	seeOrUpdateRef.value.init(id, type)
}

const resets = () => {
	state.queryForm = {
		empi: '',
		pttNm: '',
		idCrdNo: '',
		sex: ''
	}

	state.dataListSelections = []

	state.page = 1
	state.limit = 10

	getDataList()
}

const getPageDataList = () => {
	// console.log(state.page)
	getDataList()
}

// 批量删除
const deletesHandle = () => {
	let title = ''
	if (state.dataListSelections.length) {
		state.dataListSelections?.filter((item, index) => {
			if (index) {
				title = title + ',' + item
			} else {
				title = item
			}
		})
		ElMessageBox.confirm(`确认批量删除主索引【${title}】吗？`, '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
			.then(() => {
				deletePatient(state.dataListSelections).then(res => {
					deletePatientEs(state.dataListSelections).then(res => {
						ElMessage.success('删除成功')
						getDataList()
					})
				})
			})
			.catch(() => {})
	} else {
		ElMessage.warning('请选择删除记录')
	}
}

// 删除
const deleteIdHandle = id => {
	ElMessageBox.confirm(`确认删除主索引【${id}】吗？`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			deletePatient([id]).then(res => {
				deletePatientEs([id]).then(() => {
					ElMessage.success('删除成功')
					getDataList()
				})
			})
		})
		.catch(() => {})
}

// 行政区划数据
const getAddressCode = (value, leaf) => {
	return new Promise(resolve => {
		const params = {
			pcode: value
		}

		useDictProviceDetailApi(params).then(res => {
			const list = res.data.map(v => {
				return {
					label: v.name,
					value: v.code,
					leaf: leaf
				}
			})
			resolve(list)
		})
	})
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteHandle, deleteBatchHandle } = useCrud(state)
</script>

<style lang="scss">
.scheduleRecordDivClass {
	height: calc(100vh - 170px);
	position: relative;
	overflow: hidden;
}

.scheduleRecordDivClass .drawerClass .el-overlay {
	height: 100%;
	position: absolute !important;
	overflow: hidden;
}
</style>
